<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>

<body class="gray-bg" style="color:#000;">
	
	<div class="container-div ui-layout-center" id="container-div">
		<div class="row" style="height:auto;">
			<div class="col-sm-6" style="padding:0 7px;">
				<div style="background:#fff;border-radius:5px;box-shadow:1px 1px 3px rgba(0,0,0,.2);padding: 10px 20px;">
					<div class="row" style="line-height: 40px;;">
						<div class="col-sm-3" style="font-weight: 600;">骨干信息</div>
						<div class="col-sm-3"></div>
						<div class="col-sm-3" style="color:#acacac;">姓名</div>
						<div class="col-sm-3">{{personData.userName}}</div>
					</div>
					<div class="row" style="line-height: 40px;;">
						<div class="col-sm-3" style="color:#acacac;">工号</div>
						<div class="col-sm-3">{{personData.userId}}</div>
						<div class="col-sm-3" style="color:#acacac;">是否是骨干</div>
						<div class="col-sm-3">{{personData.isBackBone}}</div>
					</div>
					<div class="row" style="line-height: 40px;;">
						<div class="col-sm-3" style="color:#acacac;">骨干加入方式</div>
						<div class="col-sm-3">{{personData.inType}}</div>
						<div class="col-sm-3" style="color:#acacac;">骨干加入时间</div>
						<div class="col-sm-3">{{personData.inTime}}</div>
					</div>
					<div class="row" style="line-height: 40px;;">
						<div class="col-sm-3" style="color:#acacac;">骨干退出方式</div>
						<div class="col-sm-3">{{personData.outType}}</div>
						<div class="col-sm-3" style="color:#acacac;">骨干退出时间</div>
						<div class="col-sm-3">{{personData.outTime}}</div>
					</div>
				</div>
			</div>
			
			<div class="col-sm-6" style="padding:0 7px;">
				<div style="background: #fff;border-radius: 5px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);padding:10px 20px;">
					<div class="col-sm-12" style="line-height: 40px;font-weight: 600;padding:0;">参与计划信息</div>
					<div class="row">
						<div class="col-sm-6" style="height: 92px;margin-top: 28px;">
							<div class="col-sm-3 fa fa-calendar-check-o" style="color: #3796f4;font-size: 50px;margin-top: 13px;text-align: center;"></div>
							<div class="col-sm-6">
								<p style="font-size: 30px;font-weight: 600;text-align: center;width: 65px;">{{personData.planNum}}</p>
								<p>参与的计划</p>
							</div>
						</div>
						<div class="col-sm-6" style="height: 92px;margin-top: 28px;">
							<div class="col-sm-3 fa fa-sort-amount-asc" style="color:#3796f4;font-size: 50px;margin-top: 13px;text-align: center;"></div>
							<div class="col-sm-6">
								<p v-if="personData.latestPlanRank!=''" style="font-size: 30px;font-weight: 600;text-align: center;width: 75px;">{{personData.latestPlanRank}}</p>
								<p v-else style="font-size: 30px;font-weight: 600;text-align: center;width: 75px;">暂无</p>
								<p>最新计划排名</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="row" style="height:auto;padding:15px 25px;">
			<table style="border:1px solid #ccc !important;width:100%;">
				<tr style="border-bottom:1px solid #ccc !important">
					<th style="padding:10px;border-right:1px solid #ccc;">姓名</th>
					<td style="padding:10px;border-right:1px solid #ccc;">{{personData.userName}}</td>
					<th style="padding:10px;border-right:1px solid #ccc;">工号</th>
					<td style="padding:10px;">{{personData.userId}}</td>
				</tr>
				<tr style="border-bottom:1px solid #ccc !important">
					<th style="padding:10px;border-right:1px solid #ccc;">是否是骨干</th>
					<td style="padding:10px;" colspan="3">{{personData.isBackBone}}</td>
				</tr>
				<tr style="border-bottom:1px solid #ccc !important">
					<th style="padding:10px;border-right:1px solid #ccc;">骨干加入方式</th>
					<td style="padding:10px;border-right:1px solid #ccc;">{{personData.inType}}</td>
					<th style="padding:10px;border-right:1px solid #ccc;">骨干加入时间</th>
					<td style="padding:10px;">{{personData.inTime}}</td>
				</tr>
				<tr>
					<th style="padding:10px;border-right:1px solid #ccc;">骨干退出方式</th>
					<td style="padding:10px;border-right:1px solid #ccc;">{{personData.outType}}</td>
					<th style="padding:10px;border-right:1px solid #ccc;">骨干退出时间</th>
					<td style="padding:10px;">{{personData.outTime}}</td>
				</tr>
			</table>
		</div> -->
		
				
	
	
		<div id="planDiv " class="row" style="padding:20px 0;height:100%;">
			<div class="col-sm-12" style="padding:10px 7px;" v-for="(item,key) in personData.details">
				<div style="background:#fff;border-radius: 5px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
					<div style="text-align:center;font-size:26px;font-weight:700;padding-top:20px;">{{item.planName}}</div>
					<div class="row" style="font-size:16px;margin-top:20px; padding: 0 20px;">
						<div class="col-sm-3"><span style="font-weight:600;">计划类型： </span><span>{{item.planType}}</span></div>
						<div class="col-sm-3"><span style="font-weight:600;">通过分数： </span><span>{{item.passScore}}</span></div>
						<div class="col-sm-3"><span style="font-weight:600;">总得分： </span><span>{{item.totalScore}}</span></div>
						<div class="col-sm-3">
							<span style="font-weight:600;">排名： </span>
							<span v-if="item.isLastN=='1'"  style="color:red;">{{item.planRank}}</span>
							<span v-else  style="color:#000;">{{item.planRank}}</span>
						</div>
					</div>
				<div style="font-size:16px;margin-top:20px;padding: 0 20px;"><span style="font-weight:600;">描述： </span><span>{{item.planDesc}}</span></div>
				<div style="font-size:16px;margin-top:5px;height:350px;width:100%;" :id="'classScore'+ key"></div>		
			</div>
		</div>
		</div>
	</div>
	<div th:include="include :: footer"></div>
	<script th:src="@{/js/vue.js}"></script>
	<script th:src="@{/js/echarts.common.min.js}"></script>
	<script th:inline="javascript">
		new Vue({
			el:"#container-div",
			data:{
				personData:{},
				detailLength:""
			},
			mounted: function(){
				this.signPlan();
			},
			methods: {
				signPlan: function(){
					var _this=this;
					$.ajax({
						cache : true,
						type : "POST",
						url : location.origin + "/personal/overview/list",
						data : {},
						async : false,
						error : function(request) {
							$.modal.alertError("系统错误");
						},
						success : function(data) {
							_this.personData=data;
							_this.detailLength=_this.personData.details.length;
							setTimeout(function(){
								_this.echartList();
						 	},200);
						}
					}); 
				},
				echartList: function(){
					var _this=this;
					if(_this.personData.details){
						for(var i=0;i<_this.personData.details.length;i++){
							
								_this.classData(i);
						}
					}
				},
				classData: function(ID){
					
					var _this=this;
					var chartName=echarts.init(document.getElementById('classScore'+ID));
				//	debugger
					var option = {
							 tooltip : {
							        trigger: 'axis',
							        formatter: function(params){
							        	if(_this.personData.details[ID].itemDesc){
							        		
								        	return _this.personData.details[ID].itemName[params[0].dataIndex]+"</br>成绩："+_this.personData.details[ID].itemScore[params[0].dataIndex] +"</br>备注："+_this.personData.details[ID].itemDesc[params[0].dataIndex]
							        	}else{
								        	
								        	return _this.personData.details[ID].itemName[params[0].dataIndex]+"</br>成绩："+_this.personData.details[ID].itemScore[params[0].dataIndex];
							        	}
							        },
							        axisPointer: {
							            type: 'shadow',
							            label: {
							                backgroundColor: '#6a7985'
							            }
							        }
							 },
							 grid:{
								 left:'7%',
								 right:'2%',
								 bottom:'30%'
							 },
							 xAxis: {
							      type: 'category',
							      axisLabel:{
							    	  interval:0,
							    	  rotate:30
							      },
							      data: _this.personData.details[ID].itemName
							 },
							 yAxis: {
							      type: 'value',
							      splitLine:{show: false}
							 },
							 series: [{
							      label: {
							           normal: {
							               show: true,
							               position: 'top'
							           }
							      },
							      barWidth :20,
							      data: _this.personData.details[ID].itemScore,
							      type: 'bar',
							      color:['#1c84c6']
							 }]
					 };
					 chartName.setOption(option);
					 $(window).resize(function(){
						chartName.resize();
					 }) 
				}
			}
		})

	</script>
</body>
</html>